<template>
  <div class="content">
          <div class="categoryWrap">
             <span>日期 : </span>
             <el-date-picker
                v-model="value1"
                type="year"
                placeholder="选择年份">
            </el-date-picker>
          </div>
            <!-- tabs -->
          <div class="tabWrap">
              <div
              :class="activeIndex == index ? 'active' : ''"
              @click="activeIndex = index"
               v-for="(ele,index) in tabList" :key="index">{{ele.name}}</div>
          </div>
          <div class="tables">
            <el-table :header-cell-style="{background:'#f5f6f8'}"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange">
            <el-table-column
            prop="number"
            label="合同分类"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="1月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="2月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="3月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="4月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="5月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="6月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="7月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="8月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="9月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="10月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="11月"
            >
            </el-table-column>

            <el-table-column
            prop=""
            label="12月"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="合计"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="占比"
            >
            </el-table-column>
        </el-table>
     </div>
  </div>
</template>

<script>
  export default {
    data () {
       return{
            tableData: [{
              number:'科技公司',
            }, {
               number:'集团内部',
            },{
               number:'合计',
            }
            ],
        tabList:[{name:"签订单位"},{name:"合同内外"},{name:"生产类型"},{name:"生产方式"}],
        activeIndex:0
       }
    },
    methods: {
       
    },

  }

</script>
<style lang='scss' scoped>
.content{
   min-height: calc(100vh - 130px);
   background: #fff;
   padding: 30px;
   border-radius: 10px;
   .tabWrap{
       display: flex;
       margin-top: 30px;
       >div{
           line-height: 44px;
           width: 120px;
           border-radius: 4px;
           border: 1.6px solid #EBEEF5 ;
           margin-right: 20px;
           text-align: center;
           color: #909399;
           font-size: 14px;
       }
       .active{
           border: 1px solid #409EFF;
           color: #409EFF;
       }
   }
   .categoryWrap{
       span{
         margin-right: 30px;
       }
    }
   .tables{
       margin: 30px 0;
       width: 100%;
       overflow-x: scroll;
       ul{
           height: 50px;
           line-height: 50px;
           margin: 0;
           padding: 0;
           display: flex;
           list-style: none;
           li{
               min-width: 180px;
               height: 50px;
               text-align: center;
               border-top: 1px solid #EBEEF5 ;
               border-left: 1px solid #EBEEF5 ;
               color: #909399;
               font-size: 14px;
           } 
       }
       .head_ul{
           li{
               background-color: #f5f6f8;
           }
       }
       .list_ul{
           li{
               color: #606266;
           }
       }
   }
}
</style>